<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <h2></h2>
  <h2></h2>
  <h2></h2>
  <h2></h2>
  <ul id="box">

  </ul>
  <div id="app">1111</div>

  <div class="root qqq">123456</div>
</body>
</html>
<script>
  // d3的select 只能获取一个元素， 参数就是 css选择器
  // let h2 = d3.select('body').select('h2')
  let h2 = d3.select('body').selectAll('h2')
  console.log(h2)
  h2.text('hello world') // text html 类似JQ的方法
  h2.html('<i>hello </i>')

  // 通过append 可以增加元素
  d3.select('#box').append('li').text('100')

  // 通过insert 也可以增加元素
  d3.select('body').insert('h1','#app').text('hahaha')


  // attr 是用来设置行内属性的
  // style 是用来设置行内样式的；
  d3.select('#app').attr('style','color:red;background:#eee')
  d3.select('#app').style('font-size','30px')
  d3.select('#app').attr('class','qqq')

  // classed('新类名',true) 添加类名
  d3.select('.root').classed('root2',true)

  // classed('新类名',false) 删除类名
  // d3.select('.root').classed('root2',false)

  // classed('要判断的类名') 判断是否有这个类名
  let bol = d3.select('.root').classed('qqq')
  console.log(bol)
</script>